<script setup lang='ts'>
import JournalLocal from "@/components/journal-comps/journal-local.vue"
import JournalAlbum from "@/components/journal-comps/journal-album.vue"
import { onLoad } from "@dcloudio/uni-app"
import { reactive, ref } from "vue";
import { IUploadImgStatus, type IJournalExt, type IUploadImg, type IPhotos } from "@/common/JournalTypes"
import { getJournalStore } from "@/utils/storage/journalTemp"
import { uploadJournalImg } from "@/api/toolsApi"
import { ResponseCode } from "@/common/Responsetypes"
import useJournal from "./useJournal"

const journalInfo = reactive({} as IJournalExt)

// FIXME 修改日志的图片列表，新加的 图片对象 没有 index 属性，index 属性需要吗？create 时 index 属性也有这种问题吗？
const fileList = ref<IUploadImg[]>([])

onLoad(() => {

  const journal = getJournalStore()
  if (!journal.m_id) {
    uni.showToast({
      title: '日记信息错误',
      icon: 'none',
      duration: 1000,
      success: () => {
        uni.reLaunch({
          url: '/pages/index/index'
        })
      }
    })
  } else {
    Object.assign(journalInfo, journal)
    journalInfo.photos?.map((item) => {
      fileList.value.push({
        url: item.url,
        index: item.index,
        message: "",
        type: "image",
        status: IUploadImgStatus.SUCCESS,
        min: item.min
      } as IUploadImg)
    })
  }

})

const { handleModifyJournal, imgUploadedRef } = useJournal(fileList, journalInfo)

function afterRead(event: { file: IUploadImg[], index: number, name: string }) {
  event.file.map((item) => {
    fileList.value.push({
      ...item,
      status: IUploadImgStatus.UPLOAD,
      message: '上传中'
    })
  })

  const uploadImgs = fileList.value.filter((item) => item.status === 'uploading')

  uploadJournalImg(uploadImgs).then((result) => {
    if (result.code === ResponseCode.PASS) {
      const beginIndex = fileList.value.length - uploadImgs.length
      result.data.forEach((item: IPhotos) => {
        fileList.value[item.index + beginIndex].status = IUploadImgStatus.SUCCESS;
        fileList.value[item.index + beginIndex].url = item.url;
        fileList.value[item.index + beginIndex].message = "";
        fileList.value[item.index + beginIndex].min = item.min
      });
    }
  })
}

function deletePic(e: IUploadImg) {
  fileList.value.splice(e.index, 1)
}

</script>

<template>
  <div class='journal-modify__container mlr-40 mt-40 pb-40'>
    <!-- 文字区域 -->
    <uv-textarea border="none" focus autoHeight count maxlength="60" placeholder="这一刻的想法..."
      v-model="journalInfo.content"></uv-textarea>

    <JournalLocal :name="journalInfo.marker_poi.name" />
    <JournalAlbum class="mt-40" :fileList="fileList" :afterRead="afterRead" :deletePic="deletePic" />

    <!-- 可见范围 -->
    <uv-cell class="mt-40" icon="account" title="谁可以看" :label="journalInfo.is_open ? '所有用户都可见' : '仅自己可见'">
      <template v-slot:value>
        <text class="mr-20">{{ journalInfo.is_open ? "公开" : '仅自己' }}</text>
        <uv-switch v-model="journalInfo.is_open" />
      </template>
    </uv-cell>

    <!-- 操作区域 -->
    <view class="journal-editor__operate mt-40">
      <uv-button @click="handleModifyJournal" :disabled="!journalInfo.content || !imgUploadedRef" type="primary"
        width="80rpx" round>发布</uv-button>
    </view>

  </div>
</template>

<style scoped lang='scss'></style>